<template>
  <view class="notes-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="title">考研笔记</view>
    </view>

    <!-- 笔记分类 -->
    <view class="categories">
      <view class="category-item" v-for="(category, index) in categories" :key="index">
        <image :src="category.icon" mode="aspectFit" class="category-icon"></image>
        <text class="category-name">{{ category.name }}</text>
      </view>
    </view>

    <!-- 笔记列表 -->
    <view class="notes-list">
      <view class="empty-message" v-if="notes.length === 0">
        <text>暂无笔记，开始创建您的第一篇笔记吧！</text>
        <button class="add-button">创建笔记</button>
      </view>

      <view class="note-item" v-for="(note, index) in notes" :key="index">
        <view class="note-header">
          <text class="note-title">{{ note.title }}</text>
          <text class="note-date">{{ note.date }}</text>
        </view>
        <text class="note-preview">{{ note.preview }}</text>
        <view class="note-footer">
          <text class="note-tag" v-for="(tag, tagIndex) in note.tags" :key="tagIndex">{{
            tag
          }}</text>
        </view>
      </view>
    </view>

    <!-- 悬浮添加按钮 -->
    <view class="floating-button">
      <text class="plus-icon">+</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 笔记分类
const categories = ref([
  { name: '政治', icon: '/static/icons/politics.png' },
  { name: '英语', icon: '/static/icons/english.png' },
  { name: '数学', icon: '/static/icons/math.png' },
  { name: '专业课', icon: '/static/icons/professional.png' },
])

// 示例笔记数据
const notes = ref([
  {
    title: '政治必背知识点整理',
    date: '2024-03-25',
    preview: '马克思主义基本原理概论重点内容...',
    tags: ['政治', '必背'],
  },
  {
    title: '英语写作模板汇总',
    date: '2024-03-20',
    preview: 'As is vividly depicted in the picture...',
    tags: ['英语', '写作'],
  },
])
</script>

<style lang="scss">
@import '@/styles/variables.scss';

.notes-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;

  .header {
    height: 180rpx;
    background: linear-gradient(180deg, $theme-color 0%, $light-theme-color 100%);
    display: flex;
    align-items: flex-end;
    padding: 0 30rpx 20rpx;

    .title {
      color: #fff;
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .categories {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 30rpx;
    margin: 20rpx 30rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .category-icon {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
      }

      .category-name {
        font-size: 24rpx;
        color: #333;
      }
    }
  }

  .notes-list {
    padding: 0 30rpx;

    .empty-message {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 100rpx 0;
      color: #999;
      font-size: 28rpx;

      .add-button {
        margin-top: 30rpx;
        background-color: $theme-color;
        color: #fff;
        font-size: 28rpx;
        padding: 15rpx 40rpx;
        border-radius: 40rpx;
      }
    }

    .note-item {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

      .note-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15rpx;

        .note-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }

        .note-date {
          font-size: 24rpx;
          color: #999;
        }
      }

      .note-preview {
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
        margin-bottom: 20rpx;
      }

      .note-footer {
        display: flex;
        flex-wrap: wrap;

        .note-tag {
          font-size: 22rpx;
          color: $theme-color;
          background-color: rgba(147, 112, 219, 0.1);
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          margin-right: 16rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }

  .floating-button {
    position: fixed;
    right: 40rpx;
    bottom: 140rpx;
    width: 100rpx;
    height: 100rpx;
    background-color: $theme-color;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8rpx 16rpx rgba(147, 112, 219, 0.4);

    .plus-icon {
      color: #fff;
      font-size: 60rpx;
      font-weight: bold;
    }
  }
}
</style>
